<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jNathanson.com | the interwebs home of josh nathanson</title>
<script src="jquery.clockpick_files/jquery-1.js" type="text/javascript"></script>
<script src="jquery.clockpick_files/mainscripts.js" type="text/javascript"></script>
<link href="jquery.clockpick_files/style.css" rel="stylesheet" 
type="text/css">
<script src="jquery.clockpick_files/a" onreadystatechange="" onload="" type="text/javascript"></script></head><body
 bgcolor="#cccccc">
<div id="header">
<a href="http://www.jnathanson.com/">jnathanson.com</a>
</div>

<div id="menu">
	<div class="menulink">
		<a href="http://www.jnathanson.com/index.cfm?page=jquery/plugins">jQuery
 Plugins</a>
	</div>
	<div class="menulink">
		<a href="http://www.jnathanson.com/index.cfm?page=about">About</a>
	</div>
	<div class="menulink">
		<a href="http://www.jnathanson.com/index.cfm?page=contact">Contact</a>
	</div>
	<div class="menulink">
		<a href="http://www.jnathanson.com/index.cfm?page=resume">Resume</a>
	</div>
</div>


<div id="content">
<link rel="stylesheet" href="jquery.clockpick_files/jquery.css" 
type="text/css">

<script type="text/javascript" src="jquery.clockpick_files/jquery_002.js"></script>
<script type="text/javascript" src="jquery.clockpick_files/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {

	function cback() {
		this.after("<div id='cbox' />");
		$("#cbox")
		.text('Callback fired!')
		.addClass('red')
		.fadeIn(100)
		.fadeOut(1500);
	}
			
	$("select").not("#test").change(function() {
		binder();
	});
	
	function binder() {
		var opts = {};
		$("select").not("#test").each(function() {
			if ($(this).attr("id") != 'event' && $(this).attr("id") != 'layout') {
				opts[$(this).attr("id")] = eval($(this).val());
			}
			else {
				opts[$(this).attr("id")] = $(this).val();
			}
		});	
		//console.log(opts);
		$("#clockpick1").unbind().unbind( "keydown" ).clockpick(opts);
		
		opts.valuefield = 'timefield1';
		$("#clockpick2").unbind().clockpick(opts, cback);
		
		opts.valuefield = 'timefield2';
		opts.useBgiframe = true;
		$("#clockpick3").unbind().clockpick(opts, cback);
	}
	
	binder();
	
});

</script>

<h1>ClockPick</h1>
<p>A jQuery timepicker plugin</p>
<h3><a href="#demo">Demo</a> | <a href="#download">Download</a> | <a 
href="#config">Configuration</a> | <a href="#history">History</a> | <a 
href="#contact">Contact</a></h3>
<a name="demo"></a>
<div class="thickline"></div>
<h2>Demo</h2>
<table border="0" cellpadding="3" cellspacing="1" width="760">
	<tbody><tr>
		<td valign="top"><table border="0" cellpadding="0" cellspacing="1">
        	<tbody><tr>
        		<td class="big">Enter time:</td>
        		<td><input autocomplete="off" name="clockpick1" size="8" 
id="clockpick1" type="text"></td>
        		<td>&nbsp;</td>
        		</tr>
        	</tbody></table>
		    Click on the field - "same field" example<br>
		    Code:<br>
		    $("#clockpick1").clockpick();<br>
		    <br>
		    <br>
		    <table border="0" cellpadding="0" cellspacing="1">
        	<tbody><tr>
        		<td class="big">Enter time:</td>
        		<td><input autocomplete="off" name="timefield1" 
id="timefield1" size="8" type="text"></td>
        		<td><img src="jquery.clockpick_files/clock.gif" 
id="clockpick2" width="20" height="20"></td>
        		<td>&nbsp;</td>
        		</tr>
        	</tbody></table>		
			<div id="cback"> </div>
		    <p>Click on the clock -- "other field" example, with callback <br>
		    	Code:<br>
		    	$("#clockpick2").clockpick(<br>
		    	{ valuefield: 'timefield1' },<br>
	    	cback);	    	</p>
		    <p class="big">USING BGIFRAME FOR IE6</p>
		   <select name="test" id="test">
                	<option selected="selected" value="hello">hello hello 
hello hello hello hello</option>
           	</select><br>
 <table border="0" cellpadding="0" cellspacing="1">
            	<tbody><tr>
            		<td class="big">Enter time:</td>
            		<td><input autocomplete="off" name="timefield2" 
id="timefield2" size="8" type="text"></td>
            		<td><img src="jquery.clockpick_files/clock.gif" 
id="clockpick3" width="20" height="20"></td>
            		<td>&nbsp;</td>
           		</tr>
           	</tbody></table>
		    <br>
		    	<br>
		    	Code:<br>
$("#clockpick2").clockpick(<br>
{ valuefield: 'timefield2',<br>
useBgiframe: true 
},<br>
	    		cback); <br>
			
		    <p><br>
	    	</p>
		</td>
		<td valign="top">
			    <p>To try different configuration options, set the options below,
 then click again on field or clock.</p>
			    <table border="0" cellpadding="3" cellspacing="1">
        		<tbody><tr>
        			<td bgcolor="#cccccc">&nbsp;</td>
        			<td bgcolor="#cccccc"><strong>Param</strong></td>
        			<td bgcolor="#cccccc"><strong>Type</strong></td>
        			<td bgcolor="#cccccc"><strong>Default</strong></td>
        			<td bgcolor="#cccccc"><strong>Try it!</strong></td>
        			</tr>
        		<tr>
        			<td rowspan="11" bgcolor="#cccccc" valign="top">Argument 1 
"options" (object) </td>
        			<td class="red" bgcolor="#eeeeee">starthour</td>
        			<td bgcolor="#eeeeee">int</td>
        			<td bgcolor="#eeeeee">8</td>
        			<td bgcolor="#eeeeee"><select name="starthour" id="starthour">
        					
        						<option value="0">0</option>
        						
        						<option value="1">1</option>
        						
        						<option value="2">2</option>
        						
        						<option value="3">3</option>
        						
        						<option value="4">4</option>
        						
        						<option value="5">5</option>
        						
        						<option value="6">6</option>
        						
        						<option value="7">7</option>
        						
        						<option value="8" selected="selected">8</option>
        						
        						<option value="9">9</option>
        						
        						<option value="10">10</option>
        						
        						<option value="11">11</option>
        						
        						<option value="12">12</option>
        						
        						<option value="13">13</option>
        						
        						<option value="14">14</option>
        						
        						<option value="15">15</option>
        						
        						<option value="16">16</option>
        						
        						<option value="17">17</option>
        						
        						<option value="18">18</option>
        						
        						<option value="19">19</option>
        						
        						<option value="20">20</option>
        						
        						<option value="21">21</option>
        						
        						<option value="22">22</option>
        						
        						<option value="23">23</option>
        						
        					</select></td>
        			</tr>
        		<tr>
        			<td class="red">endhour</td>
        			<td>int</td>
        			<td>18</td>
        			<td><select name="endhour" id="endhour">
        					
        						<option value="0">0</option>
        						
        						<option value="1">1</option>
        						
        						<option value="2">2</option>
        						
        						<option value="3">3</option>
        						
        						<option value="4">4</option>
        						
        						<option value="5">5</option>
        						
        						<option value="6">6</option>
        						
        						<option value="7">7</option>
        						
        						<option value="8">8</option>
        						
        						<option value="9">9</option>
        						
        						<option value="10">10</option>
        						
        						<option value="11">11</option>
        						
        						<option value="12">12</option>
        						
        						<option value="13">13</option>
        						
        						<option value="14">14</option>
        						
        						<option value="15">15</option>
        						
        						<option value="16">16</option>
        						
        						<option value="17">17</option>
        						
        						<option value="18" selected="selected">18</option>
        						
        						<option value="19">19</option>
        						
        						<option value="20">20</option>
        						
        						<option value="21">21</option>
        						
        						<option value="22">22</option>
        						
        						<option value="23">23</option>
        						
        					</select></td>
        			</tr>
        		<tr>
        			<td class="red" bgcolor="#eeeeee">showminutes</td>
        			<td bgcolor="#eeeeee">boolean</td>
        			<td bgcolor="#eeeeee">True</td>
        			<td bgcolor="#eeeeee"><select name="showminutes" 
id="showminutes">
                    	<option value="true" selected="selected">True</option>
                    	<option value="false">False</option>
                    	                    </select></td>
        			</tr>
        		<tr>
        			<td class="red" bgcolor="#ffffff">minutedivisions</td>
        			<td bgcolor="#ffffff">int</td>
        			<td bgcolor="#ffffff">4</td>
        			<td bgcolor="#ffffff"><select name="minutedivisions" 
id="minutedivisions">
                    	<option value="2">2</option>
                    	<option value="3">3</option>
                    	<option value="4" selected="selected">4</option>
                    	<option value="6">6</option>
                    	<option value="7">7</option>
                    	<option value="12">12</option>
                    	</select></td>
        		</tr>
        		<tr>
        			<td class="red" bgcolor="#eeeeee">military</td>
        			<td bgcolor="#eeeeee">boolean</td>
        			<td bgcolor="#eeeeee">False</td>
        			<td bgcolor="#eeeeee"><select name="military" id="military">
        					<option value="true">True</option>
        					<option value="false" selected="selected">False</option>
        					</select></td>
        			</tr>
        		<tr>
        			<td class="red" bgcolor="#ffffff">event</td>
        			<td bgcolor="#ffffff">string</td>
        			<td bgcolor="#ffffff">'Click'</td>
        			<td bgcolor="#ffffff"><select name="event" id="event">
        					<option value="focus">Focus</option>
        					<option value="click" selected="selected">Click</option>
        					<option value="mouseover">Mouseover</option>
        					</select></td>
        			</tr>
        		<tr bgcolor="#eeeeee">
        			<td class="red">layout</td>
        			<td>string</td>
        			<td>'vertical'</td>
        			<td><select name="layout" id="layout">
        				<option value="vertical" selected="selected">Vertical</option>
        				<option value="horizontal">Horizontal</option>
        				</select></td>
        			</tr>
        		<tr bgcolor="#eeeeee">
        			<td class="red" bgcolor="#ffffff">valuefield</td>
        			<td bgcolor="#ffffff">string</td>
        			<td bgcolor="#ffffff">Null</td>
        			<td bgcolor="#ffffff">--</td>
        			</tr>
        		<tr bgcolor="#eeeeee">
        			<td class="red" bgcolor="#eeeeee">useBgiframe<br>
        				(must include bgIframe plugin) </td>
        			<td bgcolor="#eeeeee">boolean</td>
        			<td bgcolor="#eeeeee">False</td>
        			<td bgcolor="#eeeeee">--</td>
        			</tr>
        		<tr bgcolor="#eeeeee">
        			<td class="red" bgcolor="#ffffff">hoursopacity</td>
        			<td bgcolor="#ffffff">float</td>
        			<td bgcolor="#ffffff">1</td>
        			<td bgcolor="#ffffff"><select name="hoursopacity" 
id="hoursopacity">
        					
        						<option value="0">0</option>
        						
        						<option value="0.1">0.1</option>
        						
        						<option value="0.2">0.2</option>
        						
        						<option value="0.3">0.3</option>
        						
        						<option value="0.4">0.4</option>
        						
        						<option value="0.5">0.5</option>
        						
        						<option value="0.6">0.6</option>
        						
        						<option value="0.7">0.7</option>
        						
        						<option value="0.8">0.8</option>
        						
        						<option value="0.9">0.9</option>
        						
        						<option value="1" selected="selected">1</option>
        						
       					</select></td>
        			</tr>
        		<tr bgcolor="#eeeeee">
        			<td class="red" bgcolor="#eeeeee">minutesopacity</td>
        			<td bgcolor="#eeeeee">float</td>
        			<td bgcolor="#eeeeee">1</td>
        			<td bgcolor="#eeeeee">
						<select name="minutesopacity" id="minutesopacity">
						
							<option value="0">0</option>
							
							<option value="0.1">0.1</option>
							
							<option value="0.2">0.2</option>
							
							<option value="0.3">0.3</option>
							
							<option value="0.4">0.4</option>
							
							<option value="0.5">0.5</option>
							
							<option value="0.6">0.6</option>
							
							<option value="0.7">0.7</option>
							
							<option value="0.8">0.8</option>
							
							<option value="0.9">0.9</option>
							
							<option value="1" selected="selected">1</option>
							
						</select>
					</td>
        		</tr>
        		<tr bgcolor="#eeeeee">
        			<td bgcolor="#cccccc">Argument 2<br>
        				"callback" (function) </td>
        			<td bgcolor="#ffffff"><br>        				</td>
        			<td bgcolor="#ffffff">function<br>
        				(gets passed back time value as string) </td>
        			<td bgcolor="#ffffff">Null</td>
        			<td bgcolor="#ffffff">--</td>
        			</tr>
        		</tbody></table>
		    <br>
		    <br>
	    </td>
	</tr>
</tbody></table>
<a name="download"></a>
<div class="thinline"></div>
<h2>Download</h2>
<p><a 
href="http://www.jnathanson.com/pages/jquery/clockpick/1.2.7/jquery.clockpick.1.2.7.js">Download
 jquery.clockpick.1.2.7.js</a> (18K) <br>
	<a 
href="http://www.jnathanson.com/pages/jquery/clockpick/1.2.7/jquery.clockpick.1.2.7.pack.js">Download
 jquery.clockpick.1.2.7.pack.js</a> (10K) <br>
	<a 
href="http://www.jnathanson.com/pages/jquery/clockpick/1.2.7/jquery.clockpick.1.2.7.min.js">Download
 jquery.clockpick.1.2.7.min.js</a> (12K) <br>
	<a 
href="http://www.jnathanson.com/pages/jquery/clockpick/1.2.7/jquery.clockpick.1.2.7.css">Download
 clockpick.1.2.7.css</a> (1K)<br>
	<a 
href="http://www.jnathanson.com/pages/jquery/clockpick/1.2.7/jquery.clockpick.1.2.7.zip">Download
 jquery.clockpick.1.2.7.zip (Zip archive of above four files)</a> (8K)
</p>
<p>Also you will of course need the jQuery library, if you don't already
 have it:<br>
<a href="http://jquery.com/">http://jquery.com</a></p>
<p>If you are using ClockPick near a select menu, you will want to<br>
	use the bgIframe plugin to combat the IE6 select menu show-through 
issue<br>
	<a href="http://jquery.com/plugins/files/bgiframe-2.1.zip">Download 
bgIframe plugin (zip archive)<br>
</a></p>
<a name="config"></a>
<div class="thinline"></div>
<h2>Configuration</h2>
<table border="0" cellpadding="6" cellspacing="1" width="640">
	<tbody><tr bgcolor="#f2f2f2">
		<td align="right" valign="top"><h3>Basic</h3></td>
		<td><p>After including the jQuery script in your html &lt;head&gt; 
block, include the jquery.clockpick.js file like so:<br>
			&lt;script src="path/to/jquery.clockpick.js"&gt;&lt;/script&gt;<br>
			<br>
			Include the clockpick css file:<br>
			&lt;link rel="stylesheet" href="path/to/clockpick.css" 
type="text/css"&gt;</p>
			<p>Then in your $(document).ready block, simply add the following bit
 of code:</p>
			<p><strong>$("#clockpick").clockpick();</strong></p>
		    <p>This assumes you are binding the plugin to an element with the 
id "clockpick". You can certainly bind the plugin to any element that 
makes sense for your use. </p></td>
	</tr>
	<tr bgcolor="#dddddd">
		<td align="right" bgcolor="#dddddd" valign="top"><h3>Adding parameters</h3></td>
		<td><p>ClockPick takes two optional parameters:<br>
				<strong>options</strong> (hash) - an object containing settings keys
 and their values<br>
			    <strong>callback</strong> (function) - a callback function to run
 after ClockPick is run</p>
			<p>Example:</p>
			<p><strong>$("#clockpick").clockpick({<br>
				starthour : 6,<br>
				endhour : 15,<br>
				showminutes : false<br>
				}, mycallback<br>
				);
				</strong><br>
			</p></td>
	</tr>
	<tr bgcolor="#f2f2f2">
		<td align="right" valign="top"><h3>Click target different <br>
		than value field </h3></td>
		<td><p>If you want to have the action on a different element than the 
time field, you would configure as below (like the "click on clock" 
demo).</p>
			<p>Assuming the field you wish to have filled with the time, has the 
name 'myfieldname':</p>
			<p><strong>$(".clockpick").clockpick({<br>
			valuefield : 'myfieldname' <br>
			});
			</strong><br>
		</p></td>
	</tr>
	<tr bgcolor="#dddddd">
		<td align="right" valign="top"><h3>Using bgIframe plugin </h3></td>
		<td><p>To account for the notorious IE6 select menu show-through 
issue, a popular jQuery plugin called <a 
href="http://jquery.com/plugins/files/bgiframe-2.1.zip">bgIframe</a> is 
frequently used. ClockPick offers support for this plugin by setting a 
configuration variable useBgiframe = true. By doing this, ClockPick 
calls the bgiFrame plugin at the right time so its divs are shown above 
any select menus that might be nearby.</p>
			<p>First you will need to include the <a 
href="http://jquery.com/plugins/files/bgiframe-2.1.zip">bgIframe plugin</a>,
 somewhere afer your include of the jQuery library: <br>
				<strong>&lt;script src="/path/to/bgiframeplugin.js" 
type="text/javascript"&gt;&lt;/script&gt; </strong></p>
			<p>Then set the configuration variable when you call ClockPick:<strong><br>
	$(".clockpick").clockpick({<br>
	useBgiframe : true <br>
	}); </strong> </p></td>
	</tr>
</tbody></table>
<br>
<br>
<a name="history"></a>
<div class="thinline"></div>
<h2>History</h2>
<p class="big">Version 1.2.7, released June 28, 2009</p>
<p>- fixed bug: "console.log" removed from code </p>
<p class="big">&nbsp;</p>
<p class="big">Version 1.2.6, released June 6, 2009</p>
<p>- fixed bug: when using external click target (clock image), text 
input was not manually editable. </p>
<p class="big">&nbsp;</p>
<p class="big">Version 1.2.5, released February 14, 2009</p>
<p>- Removed Safari hacks; newer versions of Safari (3.1+) are behaving 
more like FF and IE<br>
	- removed [@name] reference, changed to [name]; @attr selectors 
obsolete in jQuery 1.3+ </p>
<p>&nbsp;</p>
<p class="big">Version 1.2.4, released July 15, 2008</p>
<p>- Fixed "event: focus" bug with div placement<br>
	- changed css styling </p>
<p class="big">&nbsp;</p>
<p class="big">Version 1.2.3, released April 19, 2008</p>
<p>- Fixed small bug by adding display:none to containers in style sheet<br>
- New styling<br>
- Added support for variable opacity</p>
<p>&nbsp; </p>
<p class="big">Version 1.2.2, released February 20, 2008</p>
<p>Fixed bug where plugin would fail on IE6 if Doctype was not declared.</p>
<p>&nbsp;</p>
<p class="big">Version 1.2.1, released November 20, 2007</p>
<p>Fixed small issue with div placed incorrectly when control near 
bottom of viewport and scrolltop &gt; 0.</p>
<p>&nbsp; </p>
<p><span class="big">Version 1.2, released November 19, 2007</span></p>
<p>Added native support for the bgIframe plugin.</p>
<p>&nbsp; </p>
<p class="big">Version 1.1, released September 25, 2007</p>
<table border="0" cellpadding="1" cellspacing="1" width="400">
	<tbody><tr valign="top">
		<td>+</td>
		<td>Added keyboard support. </td>
		<td>&nbsp;</td>
	</tr>
	<tr valign="top">
		<td>+</td>
		<td>Safari for Mac issues seem to be fixed. Please let me know if you 
experience any problems using Safari. </td>
		<td>&nbsp;</td>
	</tr>
	<tr valign="top">
		<td>+</td>
		<td>Fixed odd Firefox error referenced in Version 1.0. This is a known
 FF bug that has been around for a long time when using 
event.relatedTarget and the mouseout relatedTarget is an input field. 
Used a try/catch block as a workaround. More info: <a 
href="https://bugzilla.mozilla.org/show_bug.cgi?id=208427" 
target="_blank">https://bugzilla.mozilla.org/show_bug.cgi?id=208427</a></td>
		<td>&nbsp;</td>
	</tr>
</tbody></table>
<p class="big">&nbsp; </p>
<p class="big"><strong>Version 1.0, released July 12 2007.
</strong></p>
<p>Known issues:</p>
<table border="0" cellpadding="1" cellspacing="1" width="400">
	<tbody><tr valign="top">
		<td>+</td>
		<td>Div rectifier not tested on field near right/left edge of 
viewport.</td>
	    <td>&nbsp;</td>
	</tr>
	<tr valign="top">
		<td>+</td>
		<td>Safari for Mac: time div appears well below input field in "same 
field" example. Working on a workaround, as clientY does not appear to 
return the proper result in Safari when clicking on an input field. </td>
		<td>&nbsp;</td>
	</tr>
	<tr valign="top">
		<td>+</td>
		<td>Odd Firefox Error: "uncaught exception: Permission denied to <br>
			get property HTMLDivElement.nodeName" on mouseout from <br>
			minutes div onto input field </td>
	    <td>&nbsp;</td>
	</tr>
</tbody></table>
<p>&nbsp;	</p>
<a name="contact"></a>
<div class="thinline"></div>
<h2>Contact</h2>
Questions, comments, suggestions: hit me up: joshnathanson at gmail dot 
com <br>

<p>&nbsp; </p>
<p>&nbsp; </p>
<p>&nbsp; </p>

</div>

<div class="footer">
</div>

<script src="jquery.clockpick_files/predictadme.js" type="text/javascript"></script></body></html>